<template>
  <div id="app">
    {{count}} --- {{msg}}
    <input :value="count" @input="setCount($event.target.value)" type="text">
    <button @click="addCount(1)">修改1</button>
    <button @click="changeCountAsync(666)">左手7右手666</button>
    <!-- <p>getters: {{$store.getters.filterList}}</p> -->
    <p>{{filterList}}</p>
    <!-- 模块化开启命名空间后   取值得加上模块名字 -->
    <p>user模块数据: {{$store.state.user.userInfo}}</p>
    <p>{{userInfo}}</p>

    <p>setting模块数据: {{$store.state.setting.theme}}-- {{$store.state.setting.desc}}</p>
    <p>{{theme}} -- {{ desc }}</p>
    <!-- $store.getters['模块名/xxx'] -->
    <p>模块化计算属性: {{$store.getters['user/UpperCaseName']}}</p>
    <p>{{UpperCaseName}}</p>

    <!-- <button @click="$store.commit('user/changeUserName', 'xh')">修改名字</button> -->
    <button @click="changeUserName('xh')">修改名字</button>

    <!-- <button @click="$store.dispatch('user/changeUserNameAsync', 'xhh')">1s后修改名字</button> -->
    <button @click="changeUserNameAsync('xhh')">1s后修改名字</button>
    <com-one></com-one>
    <com-two></com-two>
  </div>
</template>

<script>
// input修改vuex数据
// 1. 绑定value属性
// 2. 绑定input事件获取输入内容
// 3. 提交mutations修改数据

// 注意辅助函数的相似性  mapState mapGetters 用在computed中    mapMutations, mapActions 用在methods中
import { mapState, mapMutations, mapActions, mapGetters} from 'vuex'
import ComOne from '@/components/ConOne.vue'
import ComTwo from '@/components/ConTwo.vue'
export default {
  name: 'App',
  components: {
   ComOne,
   ComTwo
  },
  // mapState方法就是返回了一个对象 这个对象符合computed值的样子
  // 映射 this.count 为 store.state.count
  // 通过    let obj= { count: function() {}, msg:  function() {}} ...obj 可以拿到对象里的属性
  computed: {
    // mapState模块化使用得加上模块的名字
    ...mapState([ 
      'count',
      'msg'
    ]),
    ...mapState('user',['userInfo']),
    ...mapState('setting',['theme','desc']),
    ...mapGetters(['filterList']),
    ...mapGetters('user', ['UpperCaseName'])
  } ,
  // {
    // count() {
    //   return this.$store.state.count
    // },
    // msg() {
    //   return this.$store.state.msg
    // }
  // },
  mounted() {},
  methods: {
    // mapMutations写在methods中
    // 上面简写的跟下面写的一致 
    ...mapMutations(['addCount', 'setCount']),
    // mapActions 用法和mapMutations一致 都是用在methods中
    ...mapActions(['changeCountAsync']),

    ...mapMutations('user', ['changeUserName']),
    ...mapActions('user', ['changeUserNameAsync'])
    // changeCountAsync() {
    //   this.$store.dispatch('changeCountAsync', 666)
    // }
    // addCount(n) {=
    //   this.$store.commit('addCount' , n)
    // },
    // setCount(e) {
    //   console.log(e);
    //   // 注意输入字符串跟数字相加 是NaN
    //   this.$store.commit('setCount', e.target.value)
    // }
  }
}
</script>

<style>

</style>
